<template>
  <!-- 分配供应商 -->
  <a-modal :width="500" v-model:visible="showChooseSupplierDialog" :title="title" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="submitAudit">
    <div class="flex-c">
      <p style="width: 120px; text-align: right; margin-right: 20px">选择供应商</p>
      <a-select v-model="supplier" value-key="id" style="width: 300px">
        <a-option v-for="(item, index) in supplierList" :key="index" :value="item">{{ item.supplierCode }}-{{ item.supplierName }}</a-option>
      </a-select>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { findSupperList } from '@/api/purchase'

  onMounted(() => {
    getSupplierList()
  })
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '选择供应商',
    },
  })

  const showChooseSupplierDialog = ref(props.isShow)
  const supplierList = ref<Array<any>>([])
  const supplier = ref()

  //供应商列表
  async function getSupplierList() {
    const res: any = await findSupperList()
    supplierList.value = res?.data || []
  }
  // 选择供应商
  async function submitAudit() {
    if (!supplier.value) {
      Message.error('请选择供应商')
      return false
    }
    emit('success', supplier.value)
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showChooseSupplierDialog.value = false
    emit('closed')
  }
</script>
